/** @method Operator
 *  @description 操作符
 **/
import React from 'react';
import { Row, Col, Select } from 'antd';
import Question from '../Question';
import './index.less';

export default function Operator(props) {
  const { isTxt } = props;
  const handleChange = (value) => {
    // const cur = props.operatorOptions && props.operatorOptions.find((item) => item.operator === value);
    props.onChange && props.onChange(value);
  };
  const title =
    props.operatorOptions && props.value && props.operatorOptions.find((item) => item.operator === props.value);
  return (
    <Row type='flex' justify='start' align='middle'>
      <Col span={22}>
        {isTxt ? (
          <>{title && title.symbol}</>
        ) : (
          <Select
            style={{ width: '100%', ...props.style }}
            placeholder={props.placeholder}
            value={props.value}
            onChange={handleChange}
            disabled={props.disabled}
            title={props.disabled ? title && title.symbol : ''}
            dropdownMatchSelectWidth={false}
          >
            {props.operatorOptions &&
              props.operatorOptions.map((item) => {
                return (
                  <Select.Option value={item.operator} key={item.operator}>
                    {item.symbol}
                  </Select.Option>
                );
              })}
          </Select>
        )}
      </Col>

      {props.value && props.value.remark && (
        <Col span={2}>
          <Question title={props.value.remark} />
        </Col>
      )}
    </Row>
  );
}
